import defaultIcon from '@/assets/defaultIcon.png';
import { Spin } from 'antd';

interface ContentCardProps {
  children?: React.ReactNode;
  title?: string;
  style?: React.CSSProperties;
  loading?: boolean;
  className?: string;
  borderRadius?: number;
  topRight?: any;
  topLeft?: any;
  iconType?: 'default' | 'line';
}

const getIcon = (iconType: 'default' | 'line') => {
  if (iconType === 'default') {
    return (
      <img src={defaultIcon} className="w-[20px] h-[20px]" alt="defaultIcon" />
    );
  } else if (iconType === 'line') {
    return <div className="w-[4px] h-[15px] bg-[#1677ff]"></div>;
  }
  return null;
};

const ContentCard = ({
  children,
  title,
  style,
  loading = false,
  className = '',
  borderRadius = 2,
  topRight,
  topLeft,
  iconType = 'default',
}: ContentCardProps) => {
  return (
    <Spin size="default" spinning={loading}>
      <div
        className={`p-[20px] relative border-radius-[${borderRadius}px] shadow-[0px_1px_3px_0px_rgba(31,31,31,0.10)] bg-[#fff] ${className}`}
        style={style}
      >
        <div className="flex justify-between items-center mb-[20px]">
          <div className="flex gap-2 justify-start items-center">
            {title && (
              <div className="text-[20px] max-w-fit font-bold flex items-center justify-center gap-2">
                {getIcon(iconType)}
                <span className="text-[16px] font-semibold">{title}</span>
              </div>
            )}
            <div>{topLeft}</div>
          </div>
          <div className="flex gap-2 items-center justify-end">{topRight}</div>
        </div>
        {children}
      </div>
    </Spin>
  );
};
export default ContentCard;
